<template>
  <div class="home-main">
    <div class="top-search">
      <router-link to="/home/map" tag="div" class="address">
        郑州
      </router-link>
      <div class="search">
        <van-search placeholder="请输入搜索关键词"
                    input-align="center" />
      </div>
    </div>

    <!-- 滚动区域 -->

    <div class="swip">
      <van-swipe class="my-swipe"
                 :autoplay="3000"
                 indicator-color="black">
        <van-swipe-item v-for="(item,index) in banner"
                        :key="index">
          <img :src="item.image_url"
               alt="">
        </van-swipe-item>

      </van-swipe>
    </div>
    <div class="chanel">
      <div class="chanel-c">
        <div class="chanel-item"
             v-for="item in channel"
             @click="goCategory(item.id)"
             :key="item.id">
          <img :src="item.icon_url"
               alt="">
          <div>{{item.name}}</div>
        </div>
      </div>

    </div>
    <div class="br"></div>
    <div class="brand">
      <div class="brand-c">
        <div class="heard"
             @click="goBrandList">品牌制造商直供</div>
        <div class="list">
          <div class="item"
               v-for="item in brandList"
               @click="gobrandDetail(item.id)"
               :key="item.id">
            <div class="text">
              <p>{{item.name}}</p>
              <p>{{item.floor_price}} 元起</p>
            </div>
            <img :src="item.new_pic_url"
                 alt="">
          </div>
        </div>
      </div>
    </div>
    <!-- 新品首发 -->
    <div class="newgoods"
         @click="goGoods('new')">
      <div class="new">新品首发</div>
      <div class="all">查看全部</div>
    </div>
    <div class="x-scroll">
      <div class="item"
           v-for="item in newGoods"
           @click="goGoodsDetail(item.id)"
           :key="item.id">
        <img :src="item.list_pic_url"
             alt="">
        <div class="name">{{item.name}}</div>
        <div class="title">{{item.goods_brief}}</div>
        <div class="price">￥{{item.retail_price}}</div>
      </div>
    </div>
    <!-- 人气推荐 -->
    <div class="newgoods hot"
         @click="goGoods('hot')">
      <div class="new">人气推荐 好物精选</div>
      <div class="all">查看全部</div>
    </div>
    <div class="x-scroll">
      <div class="item"
           v-for="item in hotGoods"
            @click="goGoodsDetail(item.id)"
           :key="item.id">
        <img :src="item.list_pic_url"
             alt="">
        <div class="name">{{item.name}}</div>
        <div class="title">{{item.goods_brief}}</div>
        <div class="price">￥{{item.retail_price}}</div>
      </div>
    </div>
    <!-- 专题精选 -->
    <div class="top-pic">
      <div class="header">
        <p>专题精选</p>
        <img src="@/assets/image/right.png"
             alt="">
      </div>
      <div class="pic-list">
        <div class="item"
             v-for="item in  topicList"
             :key="item.id">
          <img :src="item.scene_pic_url"
               alt="">
          <div class="title">
            <p class="title-name">{{item.title}}</p>
            <div class="price">0 元起</div>
          </div>
          <div class="desc">
            {{item.subtitle}}
          </div>
        </div>
      </div>
    </div>
    <!-- 商品列表组件 -->
    <div v-for="item in newCategoryList"
         :key="item.id">
      <cate-gory :datas="item.goodsList">
        <template v-slot:header>
          {{item.name}}好物
        </template>
        <template v-slot:goname>
          {{item.name}}好物
        </template>
      </cate-gory>
    </div>

  </div>
</template>

<script>
import homeApi from "@/netapi/home/home.js"
import CateGory from "./category/categiru"
//引入bsscroll
import BScroll from 'better-scroll'
export default {
  name: "HomeIndex",
  components: {
    CateGory,
  },
  data () {
    return {
      banner: [],
      brandList: [],
      channel: [],
      hotGoods: [],
      newCategoryList: [],
      newGoods: [],
      topicList: [],
      click: true

    };
  },
  computed: {

  },
  created () {
    this.getAllData();
  },
  mounted () {

  },
  methods: {
    async getAllData () {
      //保证所有数据都得到
      let res = await homeApi.homeIndex().then(res => res)
      console.log(res);
      this.banner = res.banner;
      this.brandList = res.brandList;
      this.channel = res.channel;
      this.hotGoods = res.hotGoods;
      this.newCategoryList = res.newCategoryList;
      this.newGoods = res.newGoods;
      this.topicList = res.topicList;
    },
    goCategory (id) {
      this.$router.push({ name: "HomeCategory", params: { id: id } })
    },
    goBrandList () {
      this.$router.push({ name: "HomeBrandlist" })
    },
    gobrandDetail (id) {

      this.$router.push({ name: "HomeBrandDEetail", params: { id: id } })
    },
    goGoods (val) {
    console.log(val);
    if (val == "new") {
      this.$router.push(`/home/newgoods?isnew=`+1)
    }else if(val == "hot"){
       this.$router.push(`/home/newgoods?ishot=`+1)
    }
    },
    goGoodsDetail(val){
      this.$router.push({ name: "GoodsDetail", params: { id: val } })
    }
  },
};
</script>

<style scoped lang="scss">
@mixin text {
  text-align: center;
}
.home-main {
  width: 100%;
  .top-search {
    width: 100%;
    height: 50px;
    @include text;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .address {
      width: 50px;
    }
    .search {
      width: calc(100vw - 50px);
    }
  }
  .swip {
    .my-swipe .van-swipe-item {
      height: 200px;
      width: 100%;
      img {
        height: 100%;
      }
    }
  }
  .chanel {
    width: 100%;
    height: 97px;

    .chanel-c {
      width: 332px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 13px;
      padding-bottom: 28px;
      .chanel-item {
        width: 30px;
        img {
          width: 100%;
          height: 30px;
          margin-bottom: 13px;
        }
      }
    }
  }
  .br {
    width: 100%;
    height: 10px;
    background-color: #f4f4f4;
  }
  .brand {
    width: 100%;
    .brand-c {
      width: calc(100vw - 8px);
      margin: 0 auto;
      .heard {
        height: 56px;
        @include text;
        line-height: 56px;
      }
      .list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        .item {
          position: relative;

          .text {
            margin-top: 20px;
            margin-left: 12px;
            position: absolute;
          }
          img {
            width: 178px;
            height: 116px;
          }
        }
      }
    }
  }
  .newgoods {
    width: 100%;
    margin-top: 10px;
    height: 126px;
    background: url("~@/assets/image/new.png") no-repeat center;
    background-size: cover;
    text-align: center;
    overflow: hidden;
    .new {
      width: 100%;
      margin-top: 40px;
    }
    .all {
      width: 90px;
      background-color: #d8e4f0;
      color: #9aa5b5;
      height: 24px;
      margin: 0 auto;
      line-height: 24px;
      margin-top: 20px;
    }
  }
  .x-scroll {
    width: 100%;
    height: 250px;
    display: -webkit-box;
    overflow-x: scroll;

    -webkit-overflow-scrolling: touch;
    .item {
      width: 170px;
      text-align: center;
      border-left: 1px solid #f4f4f4;
      .name {
        font-weight: bold;
      }
      .title {
        margin-bottom: 20px;
        margin-top: 20px;
      }
      img {
        margin-top: 20px;
        margin-bottom: 20px;
        width: 81px;
        height: 81px;
      }
      .price {
        text-align: left;
        margin-left: 27px;
      }
    }
  }
  .hot {
    background: url("~@/assets/image/hot.png") no-repeat center;
    background-size: cover;
    .new {
      font-weight: bold;
      color: #f4e9cb;
    }
    .all {
      background-color: #f4e9cb;
    }
  }
  .top-pic {
    border-top: 10px solid #f4f4f4;
    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px;
      img {
        width: 20px;
        height: 20px;
        margin-left: 5px;
      }
    }
    .pic-list {
      display: -webkit-box;
      overflow-x: scroll;

      -webkit-overflow-scrolling: touch;
      .item {
        margin-left: 12px;
        width: 287px;
        img {
          width: 287px;
          height: 163px;
        }
        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .title-name {
            font-weight: bold;
          }
          .price {
            color: red;
          }
        }
        .desc {
          margin-top: 4px;
          overflow: hidden; //超出部分隐藏
          text-overflow: ellipsis; //超出部分显示...
          white-space: nowrap;
          color: #9e9ea0;
        }
      }
    }
    .pic-list:last-child {
      margin-right: 12px;
    }
  }

  .box {
    width: 100%;
    height: 200px;
  }
}
</style>
